<template>
	<!-- 订单留言 -->
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="50%" @close="onCancel">
		<el-form ref="formRef" :model="form" :rules="rules"  label-width="auto">
      <el-row class="mb20">
				<el-col>
					<el-form-item label="留言" prop="content">
						<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.content" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
    <template #footer>
			<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
			<el-button @click="onCancel">取 消</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { addOrderMessage } from '/@/api/admin1';
import { ElMessage } from 'element-plus';

export default {
	name: 'leaveMessageDialog',
	setup() {
		const state = reactive({
			title: '添加订单留言',
			open: false,
			form: {
				order_sn: '',
				content: '',
			},
			logList: [],
			submitLoading: false,
			rules: {
				content: [{ required: true, message: '留言不能为空', trigger: 'blur' }],
			},
		});

		const formRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					_addOrderMessage(state.form)
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};
		// 表单重置
		const reset = () => {
			state.form = {
				order_sn: '',
				content: '',
			};
			(formRef.value as any)?.resetFields();
		};
		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			reset();
			callback = fn;
			state.open = true;
			state.title = `订单【${config.order_sn}】留言`
			state.form.order_sn = config.order_sn;
		};

		/********** 网络事件 **********/
		// 添加留言
		const _addOrderMessage = (_data: object) => {
			addOrderMessage(_data)
				.then((res: any) => {
					console.log('添加留言', res);
					ElMessage.success('留言成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};

		return {
			formRef,
			onSubmitForm,
			onCancel,
				openDialog,
				...toRefs(state),
			};
	},
};
</script>

<style lang="scss" scoped></style>
